﻿<!DOCTYPE html />
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Calendar prototype (10 minute time unit)</title>
    <link href="Styles/jquery.mobile-1.2.0.css" rel="stylesheet" />
    <link href="Styles/jquery.mobile.structure-1.2.0.css" rel="stylesheet" />
    <link href="Styles/jquery.mobile.theme-1.2.0.css" rel="stylesheet" />
    <link href="Styles/uScheduler.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function saveSettings() {
            $.mobile.changePage("prototype.html", {
                type: "get",
                reloadPage: true,
                data: $("#calendarSettingForm").serialize()
            });
            
        }
    </script>
</head>
<body>
    <div data-role="page" id="setupPage">
        <div data-theme="c" data-role="header">
            <h1 style="margin: 0; font-size: 22px; line-height: 42px">
                Calendar Setup</h1>
        </div>
        <div data-role="content" style="padding: 10px">
            <form id="calendarSettingForm" action="prototype.html" method="get">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>Time Slot Unit:</legend>
                    <input type="radio" name="timeSlotUnit" id="timeSlotUnit5" value="5" />
                    <label for="timeSlotUnit5">
                        5</label>
                    <input type="radio" name="timeSlotUnit" id="timeSlotUnit10" value="10" />
                    <label for="timeSlotUnit10">
                        10</label>
                    <input type="radio" name="timeSlotUnit" id="timeSlotUnit15" value="15" checked="checked" />
                    <label for="timeSlotUnit15">
                        15</label>
                    <input type="radio" name="timeSlotUnit" id="timeSlotUnit20" value="20" />
                    <label for="timeSlotUnit20">
                        20</label>
                    <input type="radio" name="timeSlotUnit" id="timeSlotUnit30" value="30" />
                    <label for="timeSlotUnit30">
                        30</label>
                </fieldset>
            </div>
            <div data-role="fieldcontain">
                <label for="timeSlotHeight">
                    Time Slot Height:</label>
                <input type="range" name="timeSlotHeight" id="timeSlotHeight" value="25"
                    min="5" max="50" />
            </div>
            <div>
                <a href="prototype.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>
                <a href="javascript:saveSettings()" data-ajax="false"  data-role="button" data-icon="check" data-theme="b" data-inline="true">
                    OK</a>
            </div>
            </form>
        </div>
        <div data-theme="c" data-role="footer" data-position="fixed">
            <h3>
                Footer
            </h3>
        </div>
    </div>
</body>
</html>
